<template>
  <div class="security-config-container">
    <div class="page-header">
      <h2>安全设置</h2>
      <p>配置系统的安全策略，包括密码策略、登录限制、访问控制等</p>
    </div>

    <div class="config-content">

    <a-form :model="form" layout="vertical">
      <a-form-item label="密码最小长度" name="passwordMinLength">
        <a-input-number v-model:value="form.passwordMinLength" :min="6" :max="20" style="width: 200px" />
        <span class="ml-2 text-gray-500">建议不少于8位</span>
      </a-form-item>

      <a-form-item label="密码复杂度要求" name="passwordComplexity">
        <a-checkbox-group v-model:value="form.passwordComplexity">
          <a-checkbox value="uppercase">包含大写字母</a-checkbox>
          <a-checkbox value="lowercase">包含小写字母</a-checkbox>
          <a-checkbox value="number">包含数字</a-checkbox>
          <a-checkbox value="special">包含特殊字符</a-checkbox>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="登录失败锁定次数" name="loginFailCount">
        <a-input-number v-model:value="form.loginFailCount" :min="3" :max="10" style="width: 200px" />
        <span class="ml-2 text-gray-500">连续失败后锁定账户</span>
      </a-form-item>

      <a-form-item label="会话超时时间" name="sessionTimeout">
        <a-select v-model:value="form.sessionTimeout" style="width: 200px">
          <a-select-option value="30">30分钟</a-select-option>
          <a-select-option value="60">1小时</a-select-option>
          <a-select-option value="120">2小时</a-select-option>
          <a-select-option value="240">4小时</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="handleSave">保存设置</a-button>
      </a-form-item>
    </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { message } from 'ant-design-vue'

const form = reactive({
  passwordMinLength: 8,
  passwordComplexity: ['lowercase', 'number'],
  loginFailCount: 5,
  sessionTimeout: '60'
})

const handleSave = () => {
  message.success('安全设置已保存')
}
</script>

<style scoped>
.security-config-container {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header {
  padding: 24px 24px 0 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-bottom: 1px solid #e8e8e8;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.page-header p {
  margin: 0 0 24px 0;
  color: #6b7280;
  font-size: 14px;
}

.config-content {
  min-height: 600px;
  background: #fff;
  padding: 24px;
}

.ml-2 {
  margin-left: 8px;
}

.text-gray-500 {
  color: #6b7280;
}
</style>